<template>
  <Modal
    :editData="editUserData"
    :dictionaryData="route.query"
    :isOpen="isOpen"
    @success="onSuccess"
    @cancel="onCancel"
  ></Modal>
  <a-form ref="searchRef" layout="inline" :model="searchObj">
    <a-form-item label="名称" name="itemName">
      <a-input v-model:value="searchObj.itemName"></a-input>
    </a-form-item>
    <a-form-item label="状态" name="itemStatus" class="statusForm">
      <a-select v-model:value="searchObj.itemStatus" :options="itemStatusOptions" :default-value="defaultItemStatus" />
    </a-form-item>
    <a-form-item>
      <a-button type="primary" @click="handleSearch">搜索</a-button>
    </a-form-item>
    <a-form-item>
      <a-button type="primary" @click="handleReset">重置</a-button>
    </a-form-item>
  </a-form>
  <a-button type="primary" style="margin-top: 12px" @click="handleOpenFirst">新增</a-button>
  <a-table :columns="columns" :pagination="pagination" :data-source="dataSource" @change="onTableChange">
    <template #headerCell></template>
    <template #bodyCell="{ column, record }">
      <template v-if="column.dataIndex === 'itemStatus'">
        {{ record.itemStatus === 1 ? '启用' : '停用' }}
      </template>
      <template v-if="column.dataIndex === 'action'">
        <a-space>
          <a-popconfirm
            title="确认要修改状态吗？"
            ok-text="确认"
            cancel-text="取消"
            @confirm="() => editStatus(record)"
          >
            <a-button danger>
              {{ record.itemStatus === 0 ? '启用' : '停用' }}
            </a-button>
          </a-popconfirm>
        </a-space>
      </template>
    </template>
  </a-table>
</template>
<script setup>
import Modal from '@/views/base-manage/dictionary-manage/editAddDictionary.vue';
import { ref, onMounted, watch } from 'vue';
import dictionaryManage from '@/api/dictionary';
import { message } from 'ant-design-vue';
import { useRoute } from 'vue-router';
const isOpen = ref(false);
const searchRef = ref(null);
const searchObj = ref({});
const editUserData = ref({});
const dataSource = ref([]);
const route = useRoute();
const dictionaryId = ref(route.query.dictionaryId);
const dictionaryName = ref(route.query.dictionaryName);

// 如果需要在组件加载时进行其他操作
onMounted(() => {
  console.log('接收到的 dictionaryId:', dictionaryId.value);
  console.log('接收到的 dictionaryName:', dictionaryName.value);

  // // 更新字典数据
  // dictionaryData.value = {
  //   dictionaryId: dictionaryId.value,
  //   dictionaryName: dictionaryName.value,
  // };
});
// 点击按钮打开
const handleOpenFirst = () => {
  isOpen.value = true;
  editUserData.value = {}; // 清空数据以便新增
};
// 分页
const pagination = ref({
  pageSizeOptions: ['10', '20'],
  showSizeChanger: true,
  current: 1,
  pageSize: 10,
  total: 0,
});

// 获取数据
const getData = async () => {
  try {
    const res = await dictionaryManage.getDictionaryItemList({
      pageNumber: pagination.value.current,
      pageSize: pagination.value.pageSize,
      itemName: searchObj.value.itemName,
      itemStatus: searchObj.value.itemStatus,
      ...route.query,
    });
    dataSource.value = res.data.data.records;
    pagination.value.current = res.data.data.pageNumber;
    pagination.value.pageSize = res.data.data.pageSize;
    pagination.value.total = res.data.data.totalItems;
    console.log(res);
  } catch (error) {
    message.error('数据获取失败，请稍后再试');
  }
};
getData();
// 换页操作
const onTableChange = (value) => {
  const { current, pageSize } = value;
  pagination.value.current = current;
  pagination.value.pageSize = pageSize;
  getData();
};
// 修改状态
const editStatus = async (editStatusRecord) => {
  console.log(editStatusRecord);

  await dictionaryManage.editDictionaryStatus(editStatusRecord.itemId);
  getData();
  message.success('修改状态成功');
};
// const dataSource = [
//   {
//     itemName: '8522',
//     itemStatus: '852852',
//     itemStatus: 1,
//   },
// ];
// 搜索
const handleSearch = async () => {
  pagination.value.current = 1;
  getData();
};
// onSuccess 处理
const onSuccess = () => {
  isOpen.value = false;
  getData();
};
// onCancel 事件
const onCancel = () => {
  isOpen.value = false;
  editUserData.value = {};
};
// 定义选项
const itemStatusOptions = [
  { label: '全部', value: null },
  { label: '启用', value: 1 },
  { label: '停用', value: 0 },
];
// 设置默认选中项的值
// '2'是'全部'的value
const defaultItemStatus = ref(null);

// 重置按钮
const handleReset = async () => {
  pagination.value.current = 1;
  await searchRef.value.resetFields();
  getData();
};
// 监听路由参数变化
watch(
  () => route.query.dictionaryId,
  (newId) => {
    getData(); // 重新获取数据
  },
);

// watch(
//   () => route.query.dictionaryName,
//   (newName) => {
//     dictionaryName.value = newName;
//   },
// );

// 计算属性用于动态标题
// const dynamicTitle = ref();
// const dynamicTitle = computed(() =>  dictionaryName.value || '默认标题')
// 表格列的配置
const columns = computed(() => {
  const name = route.query.dictionaryName || '默认标题';
  return [
    {
      title: name, // 动态标题
      dataIndex: 'itemName',
      key: 'itemName',
    },
    {
      title: '状态',
      dataIndex: 'itemStatus',
      key: 'itemStatus',
    },
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
    },
  ];
});

// const columns = ref([
//   {
//     title: '', // 动态标题
//     dataIndex: 'itemName',
//     key: 'itemName',
//   },
//   {
//     title: '状态',
//     dataIndex: 'itemStatus',
//     key: 'itemStatus',
//   },
//   {
//     title: '操作',
//     dataIndex: 'action',
//     key: 'action',
//   },
// ]);

// watch(
//   () => route.query.dictionaryName,
//   (value) => {
//     columns.value[0].title = value;
//     columns.value = [...columns.value];
//   },
// );
</script>
<style>
/* 为表单项添加样式 */
.statusForm {
  width: 184px; /* 使选择框宽度与表单宽度一致 */
}
</style>
